<template>
  <div class="joint-dispatch">
    <div class="top-title">调度区间信息</div>
    <div class="range-box">
      <el-row>
        <div class="range-key">联合调度区间名称：</div>
        <div class="range-value">{{ state.rangeArr.rangeName || '--' }}</div>
        <div class="range-key">联合调度区间编码：</div>
        <div class="range-value">{{ state.rangeArr.rangeCode || '--' }}</div>
      </el-row>
      <el-row>
        <div class="range-key">联合调度区间所在河系：</div>
        <div class="range-value">{{ state.rangeArr.zrName || '--' }}</div>
        <div class="range-key">出口预报断面：</div>
        <div class="range-value">{{ state.rangeArr.blknm || '--' }}</div>
        <div class="range-key">拓扑等级：</div>
        <div class="range-value">{{ state.rangeArr.depth || '--' }}</div>
      </el-row>

      <!-- <el-form-item label="联合调度区间所在河系" prop="region">
          <el-select v-model="state.ruleForm.region" placeholder="Activity zone">
            <el-option label="大汶河" value="0" />
            <el-option label="沂河" value="1" />
            <el-option label="沭河" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="出口预报断面" prop="region">
          <el-select filterable v-model="state.ruleForm.region" placeholder="Activity zone">
            <el-option label="大汶河" value="0" />
            <el-option label="沂河" value="1" />
            <el-option label="沭河" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="拓扑等级" prop="name">
          <span>1</span>
        </el-form-item>

      </el-form> -->
    </div>
    <div class="top-title">联合调度优化参数</div>
    <el-tabs @tab-change="handleChangeTab">
      <el-tab-pane v-for="(tab, index) in state.tabsList" :label="tab.label" :key="index">
        <div class="base-info-box">
          <el-upload
            v-model:file-list="fileList"
            class="upload-demo left-spacing"
            action="#"
            multiple
            :http-request="uploadFile"
            :show-file-list="false"
          >
            <el-button type="primary">导入参数文件</el-button>
          </el-upload>
          <!-- <el-button type="primary">导入参数文件</el-button> -->
          <div class="base-info-list">
            <dynamicTable :table-data="state.tableData" :table-headers="state.tableHeaders" />
            <!-- <el-table border :data="state.baseData" style="width: 100%" height="100%">
            <el-table-column prop="pmKey" label="参数名称" align="center" />
            <el-table-column prop="pmVl" label="参数值" align="center" />
          </el-table> -->
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
  <!-- <div class="top-title">水库基础参数信息</div> -->
</template>

<script setup>
import {
  // 查看调度规程方案
  getRegsSchemes,
  // 查询调度规程内容
  getRegsRegsRules,
  // 查询预报断面基础信息
  getJointParamsInfos,
  //上传水库参数文件
  uploadResvJointParams,
  //保存规程
  saveRegsRulesSchemes,
  //上传规程
  uploadResvRegsRules
} from '@/services/modules/model-config'
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import dynamicTable from '@/components/app-publicui/dynamic-table.vue'
const newConfig = ref(0)
const newConfigName = ref('')
const state = reactive({
  rangeArr: {
    rangeCode: '',
    rangeName: '',
    zoneId: 1,
    zrName: '',
    blknm: '',
    depth: ''
  },
  ruleForm: {},
  tableHeaders: [],
  tableData: [],
  schemeId: '',
  tabsList: [
    {
      label: '输出结果预报断面'
    },
    {
      label: '入流输入控制节点'
    },
    {
      label: '水库演进参数'
    },
    {
      label: '调度条件参数信息'
    },
    {
      label: '优化参数信息'
    },
    {
      label: '预报断面参数配置信息'
    },
    {
      label: '序列信息'
    }
  ],
  scName: '',
  typeFlag: 1,
  // 基础信息，参数信息
  baseData: [],
  // 底部列表数据
  regulationData: [],
  // 参数配置方案
  paramsData: [],
  // 选择的参数配置方案
  paramsItem: ''
})
const props = defineProps({
  // 点击断面 水库的信息
  sectionObj: {
    type: Object,
    default: () => {}
  },
  // 模型信息
  modelobj: {
    type: Object,
    default: () => {}
  }
})
watch(
  () => {
    props.sectionObj.id
  },
  () => {
    state.rangeArr = props.sectionObj
    console.log('123', props.sectionObj)
    state.paramsItem = ''
    state.regulationData = []
    // 查询规程方案
    // acceptRegsSchemes()
    // 查询预报断面基础信息
    acceptForecastSectionInfo()
    // 调度规划内容
    // acceptRegsRegsRules('')
  },
  {
    deep: true
  }
)
//新建配置
function handleCreated() {
  newConfig.value = 1
  state.scName = ''
  state.paramsItem = ''
  newConfigName.value = ''
}
//取消配置
function handleClosed() {
  newConfig.value = 0
}
//编辑配置
function handleEditParams() {
  newConfig.value = 1
  newConfigName.value = state.scName
}
//保存配置
function saveConfig() {
  let params = {}
  if (state.paramsItem) {
    params = {
      scName: newConfigName.value,
      mid: props.modelobj.id,
      blkcd: props.sectionObj.blkcd,
      id: state.paramsItem
    }
  } else {
    params = {
      scName: newConfigName.value,
      mid: props.modelobj.id,
      blkcd: props.sectionObj.blkcd
    }
  }
  saveRegsRulesSchemes(params).then((res) => {
    if (res.code === 200) {
      ElMessage({
        type: 'success',
        message: res.msg
      })
      newConfig.value = 0
      acceptRegsSchemes()
    }
  })
}
//导入水库基本信息
async function uploadFile(params) {
  let { file } = params
  let formData = new FormData()
  formData.append('file', file)
  formData.append('type', Number(state.typeFlag))
  formData.append('rangeCode', props.sectionObj.rangeCode)
  formData.append('zoneId', props.sectionObj.zoneId)
  let res = await uploadResvJointParams(formData)
  if (res.code == 200) {
    ElMessage({
      type: 'success',
      message: res.msg
    })
    acceptForecastSectionInfo()
  }
}

//导入水库基本信息
async function uploadSchemeFile(params) {
  let { file } = params
  let formData = new FormData()
  formData.append('file', file)
  formData.append('scid', Number(state.paramsItem))
  formData.append('blkcd', props.sectionObj.blkcd)
  let res = await uploadResvRegsRules(formData)
  if (res.code == 200) {
    ElMessage({
      type: 'success',
      message: res.msg
    })
    acceptRegsRegsRules(state.paramsItem)
  }
}
//点击tabs
const handleChangeTab = (val) => {
  state.typeFlag = Number(val) + 1
  acceptForecastSectionInfo()
}
// 配置方案
const acceptRegsSchemes = () => {
  getRegsSchemes({
    blkcd: props.sectionObj.blkcd,
    mid: props.modelobj.id
  }).then((res) => {
    if (res.code == 200) {
      state.paramsData = res.data
      // 默认选中第一个配置方案
      handleChange(res.data[0].id)
      // 选择的参数配置方案
      state.paramsItem = res.data[0].id
    }
  })
}
// 调度规划内容
const acceptRegsRegsRules = (val) => {
  getRegsRegsRules({ scid: val, blkcd: props.sectionObj.blkcd }).then((res) => {
    if (res.code == 200) {
      state.regulationData = res.data
    }
  })
}
// 查询预报断面基础信息
const acceptForecastSectionInfo = () => {
  getJointParamsInfos({
    rangeCode: props.sectionObj.rangeCode,
    type: state.typeFlag
  }).then((res) => {
    if (res.code == 200) {
      state.baseData = res.data
      state.tableHeaders = state.baseData.title
      state.tableData = state.baseData.val
    }
  })
}
// 选择参数配置方案
const handleChange = (val) => {
  let arr = state.paramsData.filter((item) => {
    return item.id == val
  })
  state.schemeId = val
  state.scName = arr[0].scName
  acceptRegsRegsRules(val)
}
</script>

<style lang="less" scoped>
.joint-dispatch {
  height: calc(100% - 80px);
  .top-title {
    padding-left: 10px;
    margin: 20px 0 10px 0;
    color: #409eff;
    font-size: 14px;
    height: 20px;
  }
  .range-box {
    height: 100px;
    margin-left: 50px;
    margin-top: 20px;
    :deep(.el-row) {
      height: 50px;
      .range-key {
        margin-left: 15px;
        // color: #797979;
      }
      .range-value {
        color: #797979;
        margin-left: 15px;
      }
    }
  }
  .el-tabs {
    margin-left: 10px;
    height: calc(100% - 180px);
    :deep(.el-tabs__content) {
      height: calc(100% - 45px);
      .el-tab-pane {
        height: 100%;
      }
    }
  }
  .base-info-box {
    height: calc(100% - 50px);
    // position: relative;
    :deep(.el-upload) {
      float: right;
      margin-right: 30px;
      margin-bottom: 10px;
    }
    .base-info-list {
      // padding: 0 20px;
      margin-top: 10px;
      height: calc(100% - 40px);
    }
  }

  .bottom-table {
    padding: 0 10px;
    margin-top: 10px;
    // height: 300px;
    height: calc(100% - 620px);
  }
  .peizhi {
    margin: 20px 0 20px 10px;
    display: flex;
    justify-content: space-between;
    color: #797979;
  }
  .config-title {
    width: 150px;
  }
  .m-2 {
    margin-left: 20px;
  }

  .btn {
    margin-right: 20px;
    display: flex;
    :deep(.el-button) {
      margin-right: 15px;
    }
  }
}
</style>
